<nz-breadcrumb>
  <nz-breadcrumb-item>
    员工
  </nz-breadcrumb-item>
</nz-breadcrumb>

<div>
  <button nz-button nzType="primary" (click)="onClickCreateStaffs()">
    创建
  </button>
</div>

<nz-table
  [nzData]="data"
  [nzFrontPagination]="false"
  [nzLoading]="loading"
  [nzTotal]="total"
  [nzPageSize]="pageSize"
  [(nzPageIndex)]="pageIndex"
  (nzQueryParams)="onQueryParamsChange()"
>
  <thead>
    <tr>
      <th>账号</th>
      <th>创建时间</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of data">
      <td>{{ item.account }}</td>
      <td>{{ item._id | objectidToTime }}</td>
      <td>
        <a (click)="onClickEditItem(item)">编辑</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a
          class="delete"
          nz-popconfirm
          nzPopconfirmTitle="确定删除这个员工？"
          (nzOnConfirm)="onConfirm(item._id)"
          >删除</a
        >
      </td>
    </tr>
  </tbody>
</nz-table>

<nz-drawer
  nzWidth="600px"
  [nzVisible]="visible"
  nzPlacement="right"
  nzTitle="员工"
  (nzOnClose)="closeDrawer()"
>
  <app-create-staff-form
    *ngIf="!switchStaffFormVisible"
    (create)="onCreate()"
  ></app-create-staff-form>
  <app-edit-staff-form
    *ngIf="switchStaffFormVisible"
    [staff]="item"
    (update)="onUpdate()"
  ></app-edit-staff-form>
</nz-drawer>
